<template>
  <div class>
    <nly-container :fluid="true">
      <nly-breadcrumb>
        <nly-breadcrumb-item icon="nlyfont nly-icon-home-fill" to="/" text="首页" />
        <nly-breadcrumb-item icon="nlyfont nly-icon-outlet" to="/food" active text="充值优惠管理" />
      </nly-breadcrumb>
      <Modal
        :title="update?'修改充值优惠':'添加充值优惠'"
        :styles="{width: '60%'}"
        v-model="modalAddText"
        class-name="vertical-center-modal"
        :footer-hide="true"
        @on-cancel="cancel"
      >
        <div>
          <Form ref="dataText" :model="dataText" :label-width="80">
            <FormItem label="会员月份" prop="month">
              <Input v-model="dataText.month" placeholder="请输入几个月" />
            </FormItem>
            <FormItem label="所需金额" prop="fill">
              <Input v-model="dataText.fill" placeholder="请输入所需金额" />
            </FormItem>
            <FormItem label="赠送金额" prop="feedback">
              <Input v-model="dataText.feedback" placeholder="请输入赠送金额" />
            </FormItem>
            <FormItem label="活动金额" prop="activityPrice">
              <Input v-model="dataText.activityPrice" placeholder="请输入活动金额" />
            </FormItem>
            <FormItem label="会员限购" prop="limitCount">
              <Input v-model="dataText.limitCount" placeholder="请输入会员限购次数" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="AddText('dataText')">提交</Button>
              <Button @click="ModalClose" style="margin-left: 8px">取消</Button>
            </FormItem>
          </Form>
        </div>
      </Modal>

      <section class="content">
        <row>
          <i-col :md="8" :sm="12">
            <i-button
              type="primary"
              style="margin-left:16px;margin-bottom: 10px;"
              @click="addShow"
              icon="md-add"
            >添加充值优惠</i-button>
          </i-col>
        </row>
        <br />
        <Table
          border
          :columns="header"
          :data="accountList"
          @on-selection-change="enterall"
          ref="selection"
        >
          <template slot-scope="{row}" slot="action">
            <Button
              style="margin-right: 10px;"
              type="primary"
              size="small"
              @click="changeText(row.id,row)"
            >修改</Button>
            <Button style="margin-left:16px" type="error" size="small" @click="remove(row.id)">删除</Button>
          </template>
        </Table>
        <br />
      </section>
    </nly-container>
  </div>
</template>
<script>
import apis from "@/api/account";
export default {
  data() {
    return {
      modalAddText: false,
      update: false,
      searchText: "",
      total: 0,
      data: {
        page: 1, 
        pageSize: 100, 
        fill: ""
      },
      header: [
        
        {
          title: "会员月份",
          key: "month",
          align: "center"
        },
        {
          title: "所需金额",
          key: "fill",
          align: "center"
        },
        {
          title: "赠送金额",
          key: "feedback",
          align: "center"
        },
        {
          title: "活动价格",
          key: "activityPrice",
          align: "center"
        },
        {
          title: "限购次数",
          key: "limitCount",
          align: "center"
        },
        {
          title: "操作",
          slot: "action",
          width: 180,
          fixed: "right",
          align: "center"
        }
      ],
      accountList: [],
      count_scale: [],
      pageNow: 1,
      selectclass: [],
      dataText: {
        fill: "",
        feedback: "",
        activityPrice: "",
        limitCount: "",
        month:''
      },
      di_id:0,
     
      key: ""
    };
  },
  mounted() {
    let that = this;
    that.getcharge();
  },
  methods: {
    addShow() {
      this.modalAddText = true;
    },
    enterall(e) {
      this.enteralldata = e;
      console.log(e);
    },
    remove(id) {
      
      apis
        .deletecongnum({ id: id })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.$Message.success("删除成功");
            this.getcharge();
          } else {
            this.$Message.error("删除失败!");
          }
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
          this.$Message.error("删除失败!");
        });
    },
    getcharge() {
      let that = this;
      apis.getcharge(this.data).then(response => {
        let resdata = response.data;
        if (resdata.code == 0) {
          console.log(response.data);
          that.accountList = resdata.data;
        }
      });
    },
    changePage(page) {
      this.data.page = page;
      this.getcharge();
    },
    search_account(val) {
      this.data.page = 1;
      let data = this.data;
      data.fill = val;
      this.getcharge();
    },
    ModalClose() {
      this.modalAddText = false;
      this.update = false;
    },
    changeText(id, data) {
      console.log("打开模态框");
      this.update = true;
      this.dataText.fill = data.fill;
       this.dataText.month = data.month;
      this.dataText.feedback = data.feedback;
      this.dataText.activityPrice = data.activityPrice
      this.dataText.limitCount = data.limitCount
      this.modalAddText = true;
      this.di_id = id;
      console.log(this.di_id);
    },
    AddText(name) {
      console.log(name);
      console.log(this.update);
      var that = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.update) {
            this.dataText.id = this.di_id;
            apis
              .updatecongnum({
                id: this.dataText.id,
                fill: this.dataText.fill,
                feedback: this.dataText.feedback,
                month: this.dataText.month,
                activityPrice: this.dataText.activityPrice,
                limitCount: this.dataText.limitCount
              })
              .then(response => {
                if (response.data.code == 0) {
                  this.$Message.success("修改成功");
                  that.getcharge();
                  this.modalAddText = false;
                  this.update = false;
                  this.$refs.dataText.resetFields();
                } else {
                  this.$Message.error("修改失败");
                }
              });
          } else {
            apis
              .congnum({
                fill: this.dataText.fill,
                feedback: this.dataText.feedback,
                month: this.dataText.month,
                activityPrice: this.dataText.activityPrice,
                limitCount: this.dataText.limitCount
              })
              .then(response => {
                this.loading = false;
                let resdata = response.data;
                if (resdata.code == 0) {
                  this.$refs.dataText.resetFields();
                  this.modalAddText = false;
                  this.update = false;
                  this.$Message.success("添加成功");
                  that.getcharge();
                } else if (resdata.code == 201) {
                  this.$Message.success("账号重复添加");
                }
              });
          }
        }
      });
    },
    cancel() {
      this.$refs.dataText.resetFields();
      this.dataText.fill = "";
      this.dataText.feedback = "";
      this.modalAddText = false;
      this.update = false;
    }
  }
};
</script>

<style scoped>
.padding20 {
  margin: 20px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  margin: 5px;
}
.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
.ivu-modal-body {
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
</style>